import { inject, onMounted, ref } from "vue";
import { mapStore } from "@/store";

export const curRoad = () => {
    let map
    let urlRoads = 'http://39.103.151.139:8000/gis/road_state'
    let urlEvent = 'http://39.103.151.139:8000/gis/event'
    let urlPolice = 'http://39.103.151.139:8000/gis/police'
    const date = ref(0)
    const store = mapStore()
    onMounted(() => {
        map = inject('$map')
    })

    const road = () => {
        store.isClickTool = false
        // 添加道路图层
        map.addLayer({
            id: 'roads_layer' + date.value,
            source: {
                type: 'geojson',
                data: urlRoads,
            },
            type: "line",
            paint: {
                'line-color': [
                    'case',
                    ['all', ['>', ['get', 'flow'], 1200], ['<', ['get', 'flow'], 1600]],
                    'orange',  // flow > 1200 && flow < 1600 显示橙色
                    ['>=', ['get', 'flow'], 1600],
                    'red',     // flow >= 1600 显示红色
                    'green'    // 其他情况显示绿色
                ],
                'line-width': 5
            }
        });

        // 添加事件图层
        map.addLayer({
            id: 'event_layer' + date.value,
            source: {
                type: "geojson",
                data: urlEvent,
            },
            type: "symbol",
            layout: {
                "icon-image": "custom-icon-0", // 替换成你在 Mapbox Studio 中设置的自定义图像名称
                "icon-size": 0.03 // 可选：调整图标大小
            },
        })

        // 添加警卫图层
        map.addLayer({
            id: 'police_layer' + date.value,
            source: {
                type: 'geojson',
                data: urlPolice,
            },
            type: 'symbol',
            layout: {
                'icon-image': 'custom-icon-1',
                'icon-size': 0.5,
            }
        })

        // 为警卫添加监控
        // 获取图层为police_layer开头的
        var policeName = map.getStyle().layers.filter(item => item.id.startsWith('police_layer'))
        map.on('click', policeName[0].id, evt => {
            const { lng, lat } = evt.lngLat
            let center = [lng, lat]

            // 获取派出所名称
            var { name, phone } = evt.features[0].properties

            // 创建弹窗
            var popup = new mapboxgl.Popup({
                closeButton: true,
                closeOnClick: true
            });

            // 当标记被点击时显示弹窗
            if (name == evt.features[0].properties.name) {
                popup.setLngLat(center)
                    .setHTML(`
                        <h3>${name}</h3>
                        <p>联系电话:${phone}</p>
                        <video width="250" height="240" controls>
                            <source src="/src/assets/video/Hi我是颠佬原版视频 - 1.studio_video_1687117379080.mp4(Av997423406,P1).mp4">
                            Your browser does not support the video tag.
                        </video>
                        `)
                    .addTo(map);
            }
        })

        // 为事件添加事件名弹窗
        var eventName = map.getStyle().layers.filter(item => item.id.startsWith('event_layer'))
        map.on('click', eventName[0].id, evt => {
            const { lng, lat } = evt.lngLat
            let center = [lng, lat]
            let { name, level, car_num, driver, area } = evt.features[0].properties

            // 创建弹窗
            var popup = new mapboxgl.Popup({
                closeButton: true,
                closeOnClick: true,
            })

            if (name == evt.features[0].properties.name) {
                popup.setLngLat(center)
                    .setHTML(`
                        <p>事故:${name}</p>
                        <p>等级:${level}</p>
                        <p>肇事车牌号:${car_num}</p>
                        <p>驾驶人:${driver}</p>
                        <p>地区:${area}</p>
                    `)
                    .addTo(map)
            }
        })

        date.value++
    }
    return {
        road,
    }
}